<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google地图天气预报</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ"></script>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ"></script>
    <script type="text/javascript">
    //全局变量GMap
    var map;
    
    //RSS命名空间
    var nsGeo = "http:\/\/www.w3.org\/2003\/01\/geo\/wgs84_pos#";
    var nsYWeather = "http:\/\/xml.weather.yahoo.com\/ns/rss\/1.0";
    
    //Url模板，其中{...}这些内容会被实际的值所代替
    //地标图片的路径模版
    var iconUrlTemplate = "http:\/\/l.yimg.com\/us.yimg.com\/i\/us\/we\/31/{code}.gif";
    //天气RSS路径的模版
    var feedUrlTemplate = "http:\/\/weather.yahoo.com\/forecastrss?p={id}&u={unit}";
    
    //GIcon模板，image属性通过iconUrlTemplate产生
    var iconTemplate = new GIcon();
    iconTemplate.shadow = "shadow.gif"
    iconTemplate.iconSize = new GSize(31, 31);
    iconTemplate.shadowSize = new GSize(1, 1);
    iconTemplate.iconAnchor = new GPoint(16, 15);
    iconTemplate.infoWindowAnchor = new GPoint(16, 15);
    
    
    google.load("feeds", "1");
    
    //创建YWeather()类
    function YWeather(){
    
    };
    
    //处理获取到的XML，并显示信息
    YWeather.prototype.process = function(result){
      if(!result.error)
      {
        //XML文档
        var xmldoc = result.xmlDocument;
        
        /*--------- 下面信息有些并未用到，可在需要时自行添加 ------------------*/
        //经纬度
        var latitude = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsGeo, "lat")[0].firstChild.nodeValue;
        var longitude = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsGeo, "long")[0].firstChild.nodeValue;
        
        //发布时间
        var pubDate = xmldoc.getElementsByTagName("pubDate")[0].firstChild.nodeValue;
        
        //描述
        var description = xmldoc.getElementsByTagName("description")[1].firstChild.nodeValue;
        
        //地区
        var locationInfo = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "location")[0];
        
        //单位
        var units = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "units")[0];
        
        //风
        var wind = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "wind")[0];
        
        //大气
        var atmosphere = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "atmosphere")[0];
        
        //当前天气
        var condition = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "condition")[0];
        
        //预报信息
        var forecast = google.feeds.getElementsByTagNameNS(xmldoc.documentElement, nsYWeather , "location");
        
        
        /*--------- 下面信息有些并未用到，可在需要时自行添加 ------------------*/
        var iconUrl = iconUrlTemplate.replace("{code}", condition.getAttribute("code"));
        var weatherIcon = new GIcon(iconTemplate, iconUrl);
        var hint = locationInfo.getAttribute("city") + ": " +  condition.getAttribute("text");
        var point = new GLatLng(latitude, longitude)
        var marker = new GMarker(point, {icon:weatherIcon, title:hint});
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function(){
                                  marker.openInfoWindowHtml("<div style='font:14px'><strong>"+ locationInfo.getAttribute("city") +"<\/strong><\/div>"+ "<div style='font:12px'>"+ description +"<\/div>");
                             });
      }
    }
    
    //加载天气信息
    YWeather.prototype.loadWeather = function(id, unit){
      //如果id为空，直接返回，不予执行
      if(!id) return;
      
      this.id = id;
      //参数unit可省略，默认使用公制"c"
      this.unit = unit ? unit: "c";  
      
      //生成真实的RSS的URL
      var url = feedUrlTemplate.replace("{id}", this.id).replace("{unit}", this.unit);
      
      //加载RSS并设定其回调函数为this.process，即YWeather.process.
      this.feed = new google.feeds.Feed(url);
      this.feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
      this.feed.load(this.process);
    }
    
    
    function initialize()
    {
      var yweather = new YWeather();
      yweather.loadWeather("CHXX0138");
    }
    
    function load(){
      map = new GMap2(document.getElementById("map"), {mapTypes: [G_HYBRID_MAP]});
      map.setCenter(new GLatLng(42, 107.5), 3);
      google.setOnLoadCallback(initialize);
    }
    </script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 500px; height: 400px"></div>
  </body>
</html>
